<template>
  <div
    class="custom-image"
    :style="{
      width: px2rpx2px(props.width),
      height: px2rpx2px(props.height),
      color: props.color,
      backgroundImage: `url(${props.url})`,
    }"
  >
    <template v-if="props.hasHotZone">
      <div
        class="hot-zone"
        v-for="(item, index) in props.hotZone"
        :key="index"
        :style="{
          width: px2rpx2px(item.width),
          height: px2rpx2px(item.height),
          top: px2rpx2px(item.top),
          left: px2rpx2px(item.left),
        }"
        @click.stop="onHotZoneClick(item)"
      ></div>
    </template>
    <slot></slot>
  </div>
</template>

<script>
const propConfig = {
  name: {
    type: String,
    default: "CustomImage",
  },
  url: {
    label: "图片地址",
    type: String,
    default:
      "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202008%2F05%2F20200805160947_dgxae.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687892987&t=f4ba879cc67b9e402350b898a00729c0",
    editType: "el-input",
  },
  hasHotZone: {
    label: "是否开启图片热区",
    type: Boolean,
    default: false,
  },
  hotZone: {
    label: "热区设置",
    editType: "hotZone",
    type: Array,
    default: [],
  },
  width: {
    label: "图片宽度",
    type: String,
    default: "100%",
    editType: "el-input",
  },
  height: {
    label: "图片高度",
    type: String,
    default: "400px",
    editType: "el-input",
  },
};
</script>

<script setup>
import { ref, defineProps, defineEmits, onMounted } from "vue";
import { px2rpx2px } from "../utils/index.js";

const props = defineProps(propConfig);
const emits = defineEmits(["onHotZoneClick"]);
const isWx = ref(false);

onMounted(() => {
  // #ifdef MP-WEIXIN
  if (window !== undefined) return;
  if (uni?.getSystemInfoSync().uniPlatform === "mp-weixin") {
    isWx.value = true;
  }
  console.log(isWx.value);
  // #endif
});

const onHotZoneClick = ({ url, isCoupon, uniqueId }) => {
  const vid = props.url.split('/').at(-1)
  emits("onHotZoneClick", { url, isCoupon, vid, uniqueId });
};
</script>

<style lang="scss" scoped>
.custom-image {
  position: relative;
  z-index: 10;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  :deep(canvas) {
    width: inherit;
    height: inherit;
  }
  .hot-zone {
    position: absolute;
  }
}
</style>
